<template>
	<div class="w1024-wrap">
		<div class="page">
			<div class="search-wrap" style="border-bottom: 10px solid #f5f5f5;">
				<div class="clear">
					<div class="form-item left">
						<div class="form-item-content" style="width: auto;">
							<el-radio-group v-model="addPriceType">
								<el-radio :label="1">按单套餐加价</el-radio>
								<el-radio :label="2">统一加价</el-radio>
							</el-radio-group>
						</div>
					</div>
					<template v-if="addPriceType==2">
						<div class="form-item left">
							<p class="form-item-title">加价金额：</p>
							<div class="form-item-content" style="width: 200px;">
								<el-input type="number" v-model="addPrice" placeholder="请输入加价金额"></el-input>
							</div>
						</div>
						<div class="form-item left">
							<div class="form-item-content" style="width: 200px;">
								<el-button type="primary" @click="savePrice">加价</el-button>
							</div>
						</div>
					</template>
				</div>
			</div>

			<template v-if="list.length">
				<div class="table-wrap">
					<el-table v-loading="loading" size="middle" :data="list" style="width: 100%">
						<el-table-column prop="name" min-width="100" label="套餐名称"></el-table-column>
						<el-table-column width="100" label="套餐类型">
							<template slot-scope="scope">
								{{scope.row.type==1?'基础套餐':scope.row.type==2?'标准套餐':'高级套餐'}}
							</template>
						</el-table-column>
						<el-table-column width="100" label="运营商">
							<template slot-scope="scope">
								{{scope.row.merchant==1?'电信':scope.row.merchant==2?'移动':'联通'}}
							</template>
						</el-table-column>
						<el-table-column width="100" prop="price" label="成本价">
							<template slot-scope="scope">
								<span>{{scope.row.price/100}}</span>
							</template>
						</el-table-column>
						<el-table-column width="100" prop="month" label="有效期">
							<template slot-scope="scope">
								<span>{{scope.row.month}}个月</span>
							</template>
						</el-table-column>
						<el-table-column label="加价">
							<template slot-scope="scope">
								<el-input-number :disabled="addPriceType==2" size="small" v-model="list[scope.$index].addPrice" @input="addPriceChange(scope.$index)" :precision="2" :min="0" label="描述文字"></el-input-number>
							</template>
						</el-table-column>
						<el-table-column label="加价后价格">
							<template slot-scope="scope">
								<span>{{scope.row.finalprice}}</span>
							</template>
						</el-table-column>
						<el-table-column label="操作">
							<template slot-scope="scope">
								<span v-if="addPriceType==1" class="text-btn" @click="savePrice(scope.$index)">保存</span>
								<span v-else class="text-btn disabled">保存</span>
							</template>
						</el-table-column>
					</el-table>
				</div>
				<el-pagination :current-page="this.searchData.pagenow" class="text-center" layout="prev, pager, next,sizes" prev-text="上一页" next-text="下一页" @size-change="pageSizeChange" @current-change="currentPageChange" :total="totalCount">
				</el-pagination>
			</template>
			<no-data v-if="!loading&&!list.length"></no-data>
		</div>
	</div>
</template>

<script>
	import NoData from '@/components/NoData'
	import { getURLQueryString } from "@/utils/common"
	export default {
		name: 'PriceManage',
		components: {
			NoData,
		},
		data() {
			return {
				nextwork:false,
				loading: false,
				totalCount:0,
				addPrice:'',
				addPriceType:1,
				searchData: {
					pagenow:1,
					shownum:10,
					targetuserid:getURLQueryString('targetuserid')||'',
				},
				list: [],
			}
		},
		mounted() {
			this.getData()
		},
		watch:{
			addPrice:function(val){
				for (var i=0;i<this.list.length;i++) {
					this.list[i].addPrice=val
					this.list[i].finalprice=(this.list[i].price+this.list[i].addPrice*100)/100
				}
			}
		},
		methods: {
			addPriceTypeChange(index) {
				if(this.addPriceType != index) {
					this.addPriceType = index
				}
			},
			pageSizeChange(pageSize) {
				this.searchData.shownum = pageSize
				this.getData()
			},
			currentPageChange(page) {
				this.searchData.pagenow = page
				this.getData()
			},
			search() {
				this.searchData.pagenow=1
				this.getData()
			},
			getData() {
				console.log(this.searchData)
				this.loading=true
				this.$request.queryPriceList(this.searchData)
					.then(res => {
						if(res.code==0){
							var list=res.objlist
							list.forEach(item=>{
								item.addPrice=item.addfee/100
								item.finalprice=(item.price+item.addfee)/100
							})
							this.list=list
							this.totalCount=res.page.totalresult
						}else{
							this.msgError(res.msg)
						}
						this.loading=false
					})
			},
			addPriceChange(index){
				this.list[index].finalprice=(this.list[index].price+this.list[index].addPrice*100)/100
			},
			savePrice(index){
				if(this.network){
					return
				}
				
				if(this.addPriceType==1){
					if(this.list[index].addPrice<0){
						this.msgError('加价金额不小于0')
						return
					}
					var setuids=this.list[index].setuid
				}else{
					if(this.addPrice<0){
						this.msgError('加价金额不小于0')
						return
					}
					var ids=[]
					for(var i=0;i<this.list.length;i++){
						ids.push(this.list[i].setuid)
					}
					var setuids=ids.join(',')
				}
				this.network=true
				this.$request.savePrice({
					targetuserid:getURLQueryString('targetuserid')||'',
					setuids:setuids,
					addfees:this.addPriceType==1?this.list[index].addPrice:new Array(this.totalCount).fill(this.addPrice).join(',')
				}).then(res=>{
					if(res.code==0){
						this.msgSuccess('操作成功')
						this.getData()
					}
					else{
						this.msgError(res.msg)
					}
					this.network=false
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.search-wrap {
		padding: 16px 30px;
		background: #fff;
		margin-bottom: 10px;
		.form-item{
			margin-bottom: 0;
			>>>.el-radio__inner {
				width: 16px;
				height: 16px;
				border-radius: 3px;
				border: 1px solid #C6C6C6;
				&:after {
					border-radius: 0;
					background: none;
					box-sizing: content-box;
					content: "";
					border: 1.5px solid #fff;
					border-left: 0;
					border-top: 0;
					height: 7px;
					left: 4.5px;
					position: absolute;
					top: 1px;
					transform: rotate(45deg) scaleY(0);
					width: 3px;
					transition: transform .15s ease-in .05s;
					transform-origin: center;
				}
			}
			>>>.el-radio__input.is-checked {
				.el-radio__inner {
					background-color: #409eff;
					border-color: #409eff;
					&:after {
						transform: rotate(45deg) scaleY(1);
					}
				}
			}
		}
	}

</style>